<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>捐赠管理页面</title>
    <style>
      * {
        color: rgb(100, 50, 100);
      }
      .one {
        display: flex;
        margin-bottom: 5px;
      }
      .add {
        margin-bottom: 5px;
      }
      .table {
        width: 100%;
        border-collapse: collapse;
      }
      .table th,
      .table td {
        border: 1px solid #e36f6f;
        padding: 8px;
        text-align: left;
      }
      .table th {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h1 style="text-align: center; color: pink">捐赠管理</h1>
    <div class="one" id="one">
      <label>受捐单位请选择:</label>
      <select id="select">
        <option value="">请选择</option>
        <option value="一基金">一基金</option>
        <option value="二基金">二基金</option>
        <option value="三基金">三基金</option>
      </select>
      <button onclick="selectbtn()">查询</button>
      <div class="ye">
        <button onclick="toop()">上一页</button>
        <button onclick="next()">下一页</button>
      </div>
    </div>

    <div class="add" id="add">
      <label for="">捐赠人：</label>
      <input type="text" class="pepole" />
      <label for="">受捐单位:</label>
      <select id="addselect">
        <option value="一基金" class="option">一基金</option>
        <option value="二基金" class="option">二基金</option>
        <option value="三基金" class="option">三基金</option>
      </select>
      <label for="">金额:</label>
      <input type="text" class="price" />
      <label for="">受捐日期：</label>
      <input type="text" class="time" />
      <button class="addbtn" id="addbtn">新增</button>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>序号</th>
          <th>捐赠人</th>
          <th>受捐单位</th>
          <th>金额</th>
          <th>受捐日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td id="name">三四十</td>
          <td>一基金</td>
          <td>2000</td>
          <td>2023-08-13</td>
          <td>
            <button
              onclick="update(this.parentNode.parentNode)"
              class="updatebtn"
            >
              修改
            </button>
            <button onclick="delet(this.parentNode.parentNode)">删除</button>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td id="name">四五十</td>
          <td>二基金</td>
          <td>3000</td>
          <td>2023-08-23</td>
          <td>
            <button
              onclick="update(this.parentNode.parentNode)"
              class="updatebtn"
            >
              修改
            </button>
            <button onclick="delet(this.parentNode.parentNode)">删除</button>
          </td>
        </tr>
        <tr>
          <td id="id">3</td>
          <td id="name">五六十</td>
          <td id="jg">三基金</td>
          <td id="num">4000</td>
          <td id="timetime">2023-09-03</td>
          <td>
            <button
              onclick="update(this.parentNode.parentNode)"
              class="updatebtn"
            >
              修改
            </button>
            <button onclick="delet(this.parentNode.parentNode)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <script>
      // 1.新增
      document.querySelector(".addbtn").addEventListener("click", function () {
        //  获取id
        var a = document.querySelectorAll("tr");
        for (var i = 0; i < a.length; i++) {}
        // 获取输入数据
        var pepole = document.querySelector(".pepole").value;
        var addselect = document.querySelector("#addselect").value;
        var price = document.querySelector(".price").value;
        var time = document.querySelector(".time").value;

        // 创建新行
        var child = document.createElement("tr");
        child.innerHTML = `
        <td id="id">${i}</td>
        <td id="name">${pepole}</td>
        <td id="jg">${addselect}</td>
        <td id="num">${price}</td>
        <td id="timetime">${time}</td>
        <td>
          <button onclick="update(this.parentNode.parentNode)">修改</button>
          <button onclick="delet(this.parentNode.parentNode)">删除</button>
        </td>`;
        // 判断是否为空
        if (pepole !== "" && price !== "" && time !== "") {
          // 获取表格的tbody元素
          var father = document.querySelector("tbody");
          // 添加新元素
          father.appendChild(child);
          // 清空输入框
        } else {
          alert("不能为空！");
        }
      });
      // 删除
      function delet(row) {
        // 删除提醒
        var iscon = confirm("确定要删除吗？");
        // 获取用户点击的确定还是取消s
        // 如果为确定，则删除这一行
        if (iscon == true) {
          row.parentNode.removeChild(row);
        }
      }

      // 修改
      function update(row) {
        // 获取当前行的数据
        var i = row.cells[0].innerText; // 假设第一列是行的唯一标识符
        var pepole = row.cells[1].innerText;
        var addselect = row.cells[2].innerText;
        var price = row.cells[3].innerText;
        var time = row.cells[4].innerText;
        var father = document.querySelector("tbody");
        var child = document.querySelector("tr");
        var newchild = document.createElement("tr");
        newchild.innerHTML = `
        <td id="id">${i}  </td>
        <td id="name"><input value='${pepole}'  /></td>
        <td id="jg"><input value='${addselect}'  /></td>
        <td id="num"><input value='${price} ' /></td>
        <td id="timetime"><input value='${time}'  /></td>
        <td>
          <button onclick="qd(this.parentNode.parentNode)">确认</button>
          <button onclick="delet(this.parentNode.parentNode)">删除</button>
        </td>`;
        father.replaceChild(newchild, row);
      }
      function qd(row) {
        if (!row) return;

        // 从当前行的输入框获取新的数据
        var pepoleInput = row.cells[1].querySelector("input").value;
        var addselectInput = row.cells[2].querySelector("input").value;
        var priceInput = row.cells[3].querySelector("input").value;
        var timeInput = row.cells[4].querySelector("input").value;
        var i = row.cells[0].innerText;
        // 验证输入数据的有效性
        if (!pepoleInput || !addselectInput || !priceInput || !timeInput) {
          alert("所有字段都不能为空！");
          return; // 如果有字段为空，则不进行替换
        }

        // 创建一个新的行元素，包含新的数据
        var newchild = document.createElement("tr");
        newchild.innerHTML = `
  <td>${i}</td>
    <td>${pepoleInput}</td>
    <td>${addselectInput}</td>
    <td>${priceInput}</td>
    <td>${timeInput}</td>
    <td>
      <button onclick="update(this.parentNode.parentNode)">修改</button>
      <button onclick="delet(this.parentNode.parentNode)">删除</button>
    </td>
`;
        // 获取表格的tbody元素
        var father = row.parentNode;

        // 替换旧的行元素
        father.replaceChild(newchild, row);
      }
    </script>
  </body>
</html>
